<template>
  <div class="container">
    <div class="button-group">
      <v-button w="100px" block>Button</v-button>
      <v-button
        w="200px"
        b="#000"
        :textStyle="{ fontSize: '15px', color: '#fff' }"
        block
        bold
      >
        Button
      </v-button>
      <v-button
        w="200px"
        b="#000"
        :textStyle="{ fontSize: '15px', color: '#fff' }"
        block
        :to="{ name: 'Popup', query: { id: '2' } }"
      >
        路由跳转
      </v-button>
      <v-button w="200px" url="https://www.baidu.com" block>H5</v-button>
      <v-button w="200px" block disabled>禁用</v-button>
      <v-button>Button</v-button>
      <v-button w="120px" b="#1989fa">Button</v-button>
      <v-button w="120px" b="#1989fa">Button</v-button>
      <v-button w="100%">Button</v-button>
      <v-button w="100%" r="40px" b="#ff976a">Button</v-button>
      <v-button w="100%" r="40px" b="#ff4d4d">Button</v-button>

      <v-button
        w="100%"
        r="40px"
        b="linear-gradient(to right, #ff2034, #ee8a24)"
      >
        渐变按钮
      </v-button>

      <v-button
        w="100%"
        r="40px"
        b="#fff"
        :textStyle="{ color: '#ff2034' }"
        :style="{ border: '1px solid #ff2034' }"
        >Button</v-button
      >
    </div>
  </div>
</template>

<script>
import VButton from "../../components/button";
export default {
  components: {
    VButton,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>


<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f7f8fa;
  overflow: hidden;

  .button-group {
    margin-top: 20px;
    padding: 0 10px;

    /deep/ .button {
      margin: 0 10px 10px 0;
    }
  }
}
</style>